<html>
    <head>
    	
		  <script src="View/JS/lib/jquery-1.3.2.js" type="text/javascript"></script>
        <script src="View/JS/lib/joint.all-min.js" type="text/javascript"></script>
        <script src="View/JS/lib/use-cases.js" type="text/javascript"></script>
		<script src="View/JS/lib/jqcontextmenu.js" type="text/javascript"></script>
    </head>
		<style type="text/css" media="all">
  @import url("View/Themes/default/CSS/Main.css");
 </style>
 
    <body onmousemove="update(event)";>
<style>
	
	#world{
		background-color:white;
		width:700px;
		height:500px;
		border: 3px coral solid;
		border:medium;
	}
	#MenuUseCase
	{
		background-color:#B2BEB5;
		border: 3px coral solid;
		width:700px;
		
	}
	
</style>
<script>
	var win;
	function update(e)
	{
		win=e;
	}
	function func(name)
	{
		e=win;
		if (!e) var e = window.event;
	    if (e.pageX || e.pageY)
	    {
	        posx = e.pageX;
	        posy = e.pageY;
	    }
	    else if (e.clientX || e.clientY)
	    {
	        posx = e.clientX;
	        posy = e.clientY;
	    }

		obj=document.getElementById("world");
		x =  posx-obj.offsetLeft;
		y =  posy-obj.offsetTop; 
		
		eval(name+"(x,y,'raios')");
		
	}
</script>
	<ul id="contextmenu1" class="jqcontextmenu">
		<li><a onClick="func('addActor');">Add Actor</a></li>
		<li><a onClick="func('addUseCase');">Add UseCase</a></li>
		<li><a onClick="connectActorUseCase();">Connect</a></li>
	</ul>
        <div id="MenuUseCase">
        	
        Menu
        
        <div id="world">
        </div>
        <script type="text/javascript">
            var uml = Joint.dia.uml;
            
            Joint.paper("world", 700, 500);
			jQuery(document).ready(function($){
				 $("#world").addcontextmenu('contextmenu1'); //apply context menu to all images on the page
				
				})
		
        </script>
    </body>
</html>
